<jsp:include page="/vista/ittsa/busbannersup.jsp"></jsp:include>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  pageEncoding="ISO-8859-1"%>
<%@ taglib uri="WEB-INF/struts-html" 		prefix="html"%>
<%@ taglib uri="WEB-INF/struts-logic" 		prefix="logic"%>
<%@ taglib uri="WEB-INF/struts-bean" 		prefix="bean"%>
<%@ taglib uri="WEB-INF/struts-nested.tld" 	prefix="nested"%>
<%@ taglib uri="WEB-INF/displaytag" 		prefix="display"%>
<%@ page import="java.util.*"%>
<%@ page import="java.lang.*"%>
<%@page import="pe.com.certicom.ittsa.model.bean.*"%>  
<%@page import="pe.com.certicom.ittsa.control.action.*"%>
<%@page import="pe.com.certicom.ittsa.control.form.*"%> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="vista/css/tablebus.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript">

function loadImg()
{	var est = new Array();
	piso = new Array();

	var ruta = "<%=request.getContextPath()%>/vista/images/bus/b31/";
	<%
	ArrayList lstAsientos = (ArrayList) request.getAttribute("arrayAsientos");
	String servicio=(String) request.getAttribute("servicio");
	String origen=(String) request.getAttribute("origen");
	String destino=(String) request.getAttribute("destino");
	String fecha=(String) request.getAttribute("fecha");
	String hora=(String) request.getAttribute("hora");
	String precio1=(String) request.getAttribute("precio1");
	String precio2=(String) request.getAttribute("precio2");
	
	BeanAsiento beanAsiento = null;
	int size = lstAsientos.size();
	ArrayList <String> estAsiento = new ArrayList<String>();
	for (int i=0; i<size; i++) { 
	beanAsiento = (BeanAsiento) lstAsientos.get(i);%>
	est[<%= i+1 %>] = "<%= beanAsiento.getEstado() %>";
	piso[<%= i+1 %>] = "<%= beanAsiento.getPiso() %>"; 
	<% } %>
	var tam=<%=size%>;

	for (var id=0; id<tam; id++){
	 	if(est[id]=="R")
	    	document.getElementById(id).src =ruta+ (id)+".roj.png"; 
		if(est[id]=="S")
			document.getElementById(id).src =ruta+ (id)+".roj.png"; 
		if(est[id]=="V")
			document.getElementById(id).src =ruta+ (id)+".roj.png"; 
	} 
}

function ConstructorXMLHttpRequest()
{	 if(window.XMLHttpRequest) 
	 {	 return new XMLHttpRequest();
	 }
	 else if(window.ActiveXObject)
	 {		 
		 var versionesObj = new Array('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
		 for (var i = 0; i < versionesObj.length; i++)
		 	{	try
		 		{return new ActiveXObject(versionesObj[i]);
		 		}
		 		catch (errorControlado) 
		 		{
		 		}
		 	}
	 }

	throw new Error("No se pudo crear el objeto XMLHttpRequest");
} 

function separarAsiento(img){
	 var circ1 = img.src.substring(img.src.lastIndexOf("/")+1);
	   var ruta = "<%=request.getContextPath()%>/vista/images/bus/b31/";
	   var modo;
	   if (circ1.length==10)
		   var circ3 = circ1.substring(3,6);
	   if (circ1.length==9)
		   var circ3 = circ1.substring(2,5);
	
	if(circ3=="cel"){
		modo="1";
	}else{
		if(circ3=="ver"){
		modo="2";	
		}
	}
	if(circ3!="roj"){
	 this.XMLHttpRequestObject=ConstructorXMLHttpRequest();
	
	if(XMLHttpRequestObject) { 
		
		XMLHttpRequestObject.open("GET",
				"<%=request.getContextPath()%>/vista/ittsa/separacionAsiento.jsp?origen=<%=origen%>&destino=<%=destino%>&fecha=<%=fecha%>&hora=<%=hora%>&asiento=" + bus31(img.id) + "&modo=" + modo ,true);
				
		XMLHttpRequestObject.onreadystatechange = alResponder;
		XMLHttpRequestObject.send(null);
	}
	}else{
		alert("Asiento ocupado");
	}
} 


function alResponder(){ 
	switch(XMLHttpRequestObject.readyState ) { 
	case 4:
		if(XMLHttpRequestObject.responseText.trim()=="0"){
			alert("ya se separo el asiento");	
		}else{
			
			cambImg(document.getElementById(bus31ajax(XMLHttpRequestObject.responseText.trim())));
		}
	break;	
	}
}


function cambImg(img)
{
	   var circ1 = img.src.substring(img.src.lastIndexOf("/")+1);
	   var ruta = "<%=request.getContextPath()%>/vista/images/bus/b31/";
	   
	   if (circ1.length==10)
		   var circ3 = circ1.substring(3,6);
	   if (circ1.length==9)
		   var circ3 = circ1.substring(2,5);

	   var  tab = document.getElementById('tbSeleccion');
	   if (circ3 == "roj") {
	   alert("Asiento ocupado");
	   }else{
		   if(circ3=="cel"){
			   if(tab.rows.length <6){
			   document.getElementById(img.id).src =ruta+img.id+".ver.png";
			   ingresarSeleccion(bus31(img.id),circ3);
			   }else{
					alert("Solo se permite elegir hasta 4 asientos");
					} 
		   }else{
			   if(circ3=="ver"){
				   document.getElementById(img.id).src = ruta+img.id+".cel.png";
				}
			   ingresarSeleccion(bus31(img.id),circ3);
		   }
	   }
	   
}

function bus31(idImg){
	if(idImg==12){
		idImg=13;
		return idImg;	
	}	
	if(idImg==13){
		idImg=14;
		return idImg;	
	}
	if(idImg==14){
		idImg=17;
		return idImg;	
	}	
	if(idImg==15){
		idImg=18;
		return idImg;	
	}
	if(idImg==16){
		idImg=21;
		return idImg;	
	}	
	if(idImg==17){
		idImg=22;
		return idImg;	
	}
	if(idImg==18){
		idImg=25;
		return idImg;	
	}	
	if(idImg==19){
		idImg=26;
		return idImg;	
	}
	if(idImg==20){
		idImg=45;
		return idImg;	
	}	
	if(idImg==21){
		idImg=46;
		return idImg;	
	}
	if(idImg==22){
		idImg=47;
		return idImg;	
	}	
	if(idImg==23){
		idImg=48;
		return idImg;	
	}
	if(idImg==24){
		idImg=49;
		return idImg;	
	}	
	if(idImg==25){
		idImg=50;
		return idImg;	
	}
	if(idImg==26){
		idImg=51;
		return idImg;	
	}	
	if(idImg==27){
		idImg=52;
		return idImg;	
	}
	if(idImg==28){
		idImg=53;
		return idImg;	
	}	
	if(idImg==29){
		idImg=54;
		return idImg;	
	}
	if(idImg==30){
		idImg=55;
		return idImg;	
	}
	if(idImg==31){
		idImg=56;
		return idImg;	
	}
	return idImg;
}

function bus31ajax(idImg){
	if(idImg==13){
		idImg=12;
		return idImg;	
	}	
	if(idImg==14){
		idImg=13;
		return idImg;	
	}
	if(idImg==17){
		idImg=14;
		return idImg;	
	}	
	if(idImg==18){
		idImg=15;
		return idImg;	
	}
	if(idImg==21){
		idImg=16;
		return idImg;	
	}	
	if(idImg==22){
		idImg=17;
		return idImg;	
	}
	if(idImg==25){
		idImg=18;
		return idImg;	
	}	
	if(idImg==26){
		idImg=19;
		return idImg;	
	}
	if(idImg==45){
		idImg=20;
		return idImg;	
	}	
	if(idImg==46){
		idImg=21;
		return idImg;	
	}
	if(idImg==47){
		idImg=22;
		return idImg;	
	}	
	if(idImg==48){
		idImg=23;
		return idImg;	
	}
	if(idImg==49){
		idImg=24;
		return idImg;	
	}	
	if(idImg==50){
		idImg=25;
		return idImg;	
	}
	if(idImg==51){
		idImg=26;
		return idImg;	
	}	
	if(idImg==52){
		idImg=27;
		return idImg;	
	}
	if(idImg==53){
		idImg=28;
		return idImg;	
	}	
	if(idImg==54){
		idImg=29;
		return idImg;	
	}
	if(idImg==55){
		idImg=30;
		return idImg;	
	}
	if(idImg==56){
		idImg=31;
		return idImg;	
	}
	return idImg;
}


function ingresarSeleccion(id, estadoActual){
		var i;
		var elmTBODY= document.getElementById('tbSeleccion');
		
	if(estadoActual=="cel"){
		 	
		 	var lastRow = elmTBODY.rows.length;
  		 	var elmTR;
  			var elmTD;
  			var elmText;
  		
     	elmTR = elmTBODY.insertRow(lastRow);
        elmTD = elmTR.insertCell(0);
        
        if(id<=26)
            elmText = document.createTextNode("2");
        else 
        	elmText = document.createTextNode("1");

        elmTD.appendChild(elmText);
        elmTD = elmTR.insertCell(1);
        elmText = document.createTextNode(id);
        elmTD.appendChild(elmText);
	}
	
	if(estadoActual=="ver"){
		tab = document.getElementById('tbSeleccion');			
		
		for (i=1; i < tab.rows.length; i++){
			if(id==tab.rows[i].cells[1].innerHTML){
    			tab.deleteRow(i);
    		}
		}
	}	
}

function irMenuAtras(){
	document.getElementsByName("method")[0].value="13";
	document.forms[0].submit();		
	return true;	 	
}

function irMenuSiguiente(){
	var i;
	var tab = document.getElementById('tbSeleccion');
	for (i=2; i < tab.rows.length; i++){
		document.getElementsByName("arregloPiso")[i-2].value=tab.rows[i].cells[0].innerHTML;
		document.getElementsByName("arregloAsiento")[i-2].value=tab.rows[i].cells[1].innerHTML;	
	}	
	document.getElementsByName("method")[0].value="15";
	document.forms[0].submit();		
	return true;	 	
}
</script>

<style type="text/css">
#outer1 {
	position:absolute; 
	top: 360px; 
	left: 50px; 
}
#outer2 {
	position:absolute; 
	top: 350px; 
	left: 825px; 
}
#outer3 {
	position:absolute; 
	top: 225px; 
	left: 125px; 
}
#outer4 {
	position:absolute; 
	top: 580px; 
	left:825px;
}

#outer5 {
	position:absolute; 
	top: 710px; 
	left:380px;
}
 td.padded0 {
 padding-right:1px;
 padding-bottom:20px;
 }
 td.padded1 {
 padding-right:1px;
 padding-bottom:23px;
 }
 
 td.padded2 {
 padding-right:75px;
 }
 td.padded3 {
 padding-right:23px;
 }
 img.circ{
 height:48px;
 width:48px;
 padding:0px;
 }
button.circ { 
 height:48px;
 width:48px;
 border: 0; 
 background: transparent;
}

table.circ {
	background: url("<%=request.getContextPath()%>/vista/images/bus/supercama32.png") ;
	background-repeat: no-repeat;
	border-collapse:collapse;
	/*margin-top:3px;*/ 
	border:0px solid #946f00;
	/*padding: 30px 10px 5px;*/ 
	}
</style>
</head>
<body onload="javascript:loadImg();">
<div id="content">
<html:form action="/CompraPasaje.do"   method="post" enctype="multipart/form-data" >
<input type="hidden" name="method"/>
<% 	for (int i=0; i<size; i++) { %>
<input type="hidden" name="arregloAsiento"/>	
<input type="hidden" name="arregloPiso"/>	
	<% } %>





<table><tr><td><div id="outer1">
<table class="circ">
<tr>
<td class="padded3"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded2"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded0"></td>
<td class="padded3"></td>
<td class="padded3"></td>
<td class="padded3"></td>
<td class="padded3"></td>
</tr>
<tr>
<td class="padded3"></td>
<td class="padded1"><img id="30" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/30.cel.png"></img></td>
<td class="padded1"><img id="28" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/28.cel.png"></img></td>
<td class="padded1"><img id="24" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/24.cel.png"></img></td>
<td class="padded1"><img id="20" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/20.cel.png"></img></td>
<td class="padded2"></td>
<td class="padded1"><img id="18" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/18.cel.png"></img></td>
<td class="padded1"><img id="16" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/16.cel.png"></img></td>
<td class="padded1"><img id="14" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/14.cel.png"></img></td>
<td class="padded1"><img id="12" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/12.cel.png"></img></td>
<td class="padded1"><img id="9" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/9.cel.png"></img></td>
<td class="padded1"><img id="5" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/5.cel.png"></img></td>
<td class="padded1"><img id="1" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/1.cel.png"></img></td>
</tr>
<tr>
<td class="padded3"></td>
<td class="padded1"><img id="31" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/31.cel.png"></img></td>
<td class="padded1"><img id="29" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/29.cel.png"></img></td>
<td class="padded1"><img id="25" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/25.cel.png"></img></td>
<td class="padded1"><img id="21" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/21.cel.png"></img></td>
<td class="padded2"></td>
<td class="padded1"><img id="19" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/19.cel.png"></img></td>
<td class="padded1"><img id="17" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/17.cel.png"></img></td>
<td class="padded1"><img id="15" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/15.cel.png"></img></td>
<td class="padded1"><img id="13" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/13.cel.png"></img></td>
<td class="padded1"><img id="10" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/10.cel.png"></img></td>
<td class="padded1"><img id="6" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/6.cel.png"></img></td>
<td class="padded1"><img id="2" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/2.cel.png"></img></td>
</tr>
<tr>
<td class="padded3"></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded2"></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
</tr>
<tr>
<td class="padded3"></td>
<td class="padded1"><img id="27" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/27.cel.png"></img></td>
<td class="padded1"><img id="26" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/26.cel.png"></img></td>
<td class="padded1"><img id="23" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/23.cel.png"></img></td>
<td class="padded1"><img id="22" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/22.cel.png"></img></td>
<td class="padded2"></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="11" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/11.cel.png"></img></td>
<td class="padded1"><img id="8" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/8.cel.png"></img></td>
<td class="padded1"><img id="7" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/7.cel.png"></img></td>
<td class="padded1"><img id="4" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/4.cel.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="3" class="circ" onclick="separarAsiento(this)" src="<%=request.getContextPath()%>/vista/images/bus/b31/3.cel.png"></img></td>
</tr>
<tr>
<td class="padded3"></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded2"></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
<td class="padded1"><img id="00" class="circ" src="<%=request.getContextPath()%>/vista/images/bus/vac.00.png"></img></td>
</tr>
</table>
</div><div id="outer2">
<table id="tbSeleccion" class="resultado">
<tr>
<td class="hed" colspan="2">DATOS INGRESADOS</td>
</tr>
<tr>
<td class="hed">Piso</td>
<td class="hed">Asiento</td>
</tr>
</table>

</div><div id="outer3">
<table class="resumen">
<tr>
<td class="hed" colspan="4">SELECCION DE ASIENTOS</td>
</tr>
<tr>
	<td>RUTA</td>
	<td>SERVICIO</td>
	<td>AGENCIA</td>
	<td>FECHA</td>
</tr>
<tr>
	<td><%=origen%>-<%=destino%></td>
	<td><%=servicio%></td>
	<td><%=origen%></td>
	<td><%=fecha%>-<%=hora%></td>
</tr>
</table>
</div>
<div id="outer4">
<table class="resultado2">
<tr>
<td class="hed" colspan="2">Leyenda</td>
</tr>
<tr>
<td>Ocupado</td><td><img src="<%=request.getContextPath()%>/vista/images/bus/roj.png"></img></td>
</tr>
<tr>	
<td>Libre</td><td><img src="<%=request.getContextPath()%>/vista/images/bus/cel.png"></img></td>
</tr>
<tr>	
<td>Seleccionado</td><td><img src="<%=request.getContextPath()%>/vista/images/bus/ver.png"></img></td>
</tr>
</table>
</div>
<div id="outer5">
<table>
	<tr>
		<td class="TextoEtiqueta">
			<button onclick="return irMenuAtras();" class="btnRegresar">
			</button> 
		</td>
		<td class="TextoEtiqueta">
			<button onclick="return irMenuSiguiente();" class="btnSiguiente">
			</button> 
		</td>
	</tr>
</table>
</div>
</td></tr></table>

</html:form>
</div>
</body>
</html>


